<template>
  <div>
    <!-- 搜索部分 -->
    <div class="data_input">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
            v-model="query.query"
            placeholder="请输入内容"
            clearable
            @clear="huoqu"
          >
            <template #append>
              <el-button @click="huoqu" :icon="Search" />
            </template>
          </el-input>
        </el-col>

        <el-col :span="4">
          <el-button type="primary" @click="tiao">添加商品 </el-button></el-col
        >
      </el-row>
    </div>
    <!-- tab表格区 -->
    <el-table :data="shuju.object" border style="width: 100%">
      <el-table-column label="#" type="index"></el-table-column>
      <el-table-column label="商品名称" prop="goods_name"></el-table-column>
      <el-table-column
        label="商品价格(元)"
        prop="goods_price"
        width="130px"
      ></el-table-column>
      <el-table-column
        label="商品重量"
        prop="goods_weight"
        width="70px"
      ></el-table-column>
      <el-table-column label="商品创建时间" prop="add_time" width="150px">
        <template #default="scope" v-slot="{ row }">
          <!-- <span>{{ $filters.format(scope.row.add_time) }}</span> -->
          {{ getTime(scope.row.add_time) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="135px">
        <template #default="scope">
          <el-row>
            <el-button type="primary" size="small" :icon="Edit" />
            <el-button
              type="danger"
              size="small"
              :icon="Delete"
              @click="del(scope.row.goods_id)"
            />
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      v-model:currentPage="query.pagenum"
      v-model:page-size="query.pagesize"
      :page-sizes="[1, 5, 10, 20]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="toto"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue';
import { ref, reactive, onMounted } from 'vue';
import { apis } from '@/http/api';
import { useRoute, useRouter } from 'vue-router';
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus';
const getTime = (time: any) => {
  return moment(time * 1000).format('YYYY-MM-DD HH:mm');
};
const router = useRouter();
const route = useRoute();
//数据载体
const query = reactive({
  query: '',
  pagenum: 1,
  pagesize: 10,
});
//商品列表
const shuju = reactive({
  object: null as any,
});
//请求返回值
const toto = ref(0);
//请求数据
const huoqu = () => {
  apis.getsplbs(query.pagenum, query.pagesize, query.query).then((data) => {
    shuju.object = data.data.goods;
    toto.value = data.data.total;
    console.log(data.data);
  });
};

//分页

const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  query.pagesize = val;
  huoqu();
};
const handleCurrentChange = (val: number) => {
  query.pagenum = val;
  huoqu();
};
//跳转
const tiao = () => {
  router.push({ name: 'dingdan' });
};
//删除
const del = (id: number) => {
  ElMessageBox.confirm(
    'proxy will permanently delete the file. Continue?',
    'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
      apis.delshangpins(id).then((data) => {
        console.log('成功', data);

        huoqu();
      });
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      });
    });
};
//初始化渲染
onMounted(() => {
  huoqu();
});
//搜索框
const input = ref('');
</script>

<style lang="less" scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
